<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Admin</title>
    <meta name="description" content="管理员页面"/>
    <meta name="keywords" content="index"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />

    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css"/>
    <script src="assets/js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

    <script>
        var app=angular.module('adminApp', []);
    </script>
    <script type="text/javascript" src="/js/admin.js"></script>
    <script type="text/javascript" src="/js/admin-info.js"></script>
</head>

<body data-type="widgets" ng-app="adminApp">
<script src="assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <header ng-controller="adminInfoCtrl">
        <!-- logo -->
        <div class="am-fl tpl-header-logo">
            <a href="javascript:;"><img src="img/admin-logo.png" alt=""/></a>
        </div>
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">
            <!-- 侧边切换 -->
            <div class="am-fl tpl-header-switch-button am-icon-list">
                    <span>

                </span>
            </div>

            <!-- 其它功能-->
            <div class="am-fr tpl-header-navbar">
                <ul>
                    <!-- 欢迎语 -->
                    <li class="am-text-sm tpl-header-navbar-welcome">
                        <a href="javascript:;">欢迎, <span>{{adminname}}</span> </a>
                    </li>

                    <!-- 新提示 -->
                    <!--<li class="am-dropdown" data-am-dropdown="">
                        <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle="">
                            <i class="am-icon-bell"></i>
                            <span class="am-badge am-badge-warning am-round item-feed-badge">5</span>
                        </a>

                        &lt;!&ndash; 弹出列表 &ndash;&gt;
                        <ul class="am-dropdown-content tpl-dropdown-content">
                            <li class="tpl-dropdown-menu-notifications">
                                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <div class="tpl-dropdown-menu-notifications-title">
                                        <i class="am-icon-line-chart"></i>
                                        <span> 有n位新用户注册</span>
                                    </div>
                                    <div class="tpl-dropdown-menu-notifications-time">
                                        12分钟前
                                    </div>
                                </a>
                            </li>
                            <li class="tpl-dropdown-menu-notifications">
                                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <div class="tpl-dropdown-menu-notifications-title">
                                        <i class="am-icon-star"></i>
                                        <span> 有n条新评论</span>
                                    </div>
                                    <div class="tpl-dropdown-menu-notifications-time">
                                        30分钟前
                                    </div>
                                </a>
                            </li>

                        </ul>
                    </li>-->

                    <!-- 退出 -->
                    <li class="am-text-sm">
                        <a href="#" ng-click="exit()">
                            <span class="am-icon-sign-out"></span> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 侧边导航栏 -->
    <div class="left-sidebar">
        <!-- 菜单 -->
        <ul class="sidebar-nav">
            <li class="sidebar-nav-heading"></li>

            <!--上传信息-->
            <li class="sidebar-nav-link">
                <a href="javascript:;" class="active sidebar-nav-sub-title">
                    <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 信息上传
                    <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                </a>
                <ul class="sidebar-nav sidebar-nav-sub" style="display: block;">
                    <li class="sidebar-nav-link">
                        <a href="#" class="sub-active">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 电影上传
                        </a>
                    </li>
                    <li class="sidebar-nav-link">
                        <a href="admin-actor">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 演员上传
                        </a>
                    </li>
                </ul>
            </li>

            <!--管理列表-->
            <li class="sidebar-nav-link">
                <a href="javascript:;" class="sidebar-nav-sub-title">
                    <i class="am-icon-table sidebar-nav-link-logo"></i> 管理列表
                    <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                </a>
                <ul class="sidebar-nav sidebar-nav-sub">
                    <li class="sidebar-nav-link">
                        <a href="admin-movies">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 电影列表
                        </a>
                    </li>
                    <li class="sidebar-nav-link">
                        <a href="admin-actors">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 演员列表
                        </a>
                    </li>
                    <li class="sidebar-nav-link">
                        <a href="admin-users">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 用户列表
                        </a>
                    </li>
                    <li class="sidebar-nav-link">
                        <a href="admin-remark">
                            <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 评论列表
                        </a>
                    </li>
                </ul>
            </li>

        </ul>
    </div>

    <div ng-controller="upMovieCtrl">
        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="container-fluid am-cf row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                    <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 上传电影 </div>
                    <p class="page-header-description">请输入电影信息及海报</p>
                </div>
            </div>

            <!--表单-->
            <div class="row-content am-cf row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf widget-body am-fr am-form tpl-form-line-form">
                        <div class="am-form-group">
                            <label  class="am-u-sm-3 am-form-label">中文名 <span class="tpl-form-line-small-title">TitleCn</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input"  placeholder="请输入中文标题"
                                       ng-model="movie.titlecn"/>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label  class="am-u-sm-3 am-form-label">英文名 <span class="tpl-form-line-small-title">TitleEn</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input"  placeholder="请输入英文标题"
                                       ng-model="movie.titleen"/>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">上映时间 <span class="tpl-form-line-small-title">Time</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" class="am-form-field tpl-form-no-bg" placeholder="上映时间"
                                       data-am-datepicker="" readonly="" ng-model="movie.time"/>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">导演 <span class="tpl-form-line-small-title">director</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" placeholder="输入导演"
                                       ng-model="movie.director"/>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">演员 <span class="tpl-form-line-small-title">actors</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" placeholder="输入演员" ng-model="movie.actors"/>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">类型 <span class="tpl-form-line-small-title">type</span></label>
                            <div class="am-u-sm-9">
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                            ng-model="movie.type.a" ng-true-value="'剧情'" ng-false-value=""/> 剧情
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.b" ng-true-value="'冒险'" ng-false-value=""/> 冒险
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.c" ng-true-value="'爱情'" ng-false-value=""/> 爱情
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.d" ng-true-value="'喜剧'" ng-false-value=""/> 喜剧
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.e" ng-true-value="'动画'" ng-false-value=""/> 动画
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.f" ng-true-value="'动作'" ng-false-value=""/> 动作
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.g" ng-true-value="'战争'" ng-false-value=""/> 战争
                                </label>
                                <br/>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.h" ng-true-value="'恐怖'" ng-false-value=""/> 恐怖
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.i" ng-true-value="'悬疑'" ng-false-value=""/> 悬疑
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.j" ng-true-value="'犯罪'" ng-false-value=""/> 犯罪
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.k" ng-true-value="'科幻'" ng-false-value=""/> 科幻
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.l" ng-true-value="'传记'" ng-false-value=""/> 传记
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.o" ng-true-value="'奇幻'" ng-false-value=""/> 奇幻
                                </label>
                                <label class="am-checkbox-inline" >
                                    <input type="checkbox" data-am-ucheck=""
                                           ng-model="movie.type.p" ng-true-value="'家庭'" ng-false-value=""/> 家庭
                                </label>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-3 am-form-label">电影简介 <span class="tpl-form-line-small-title">story</span></label>
                            <div class="am-u-sm-9">
                            <textarea class="" rows="6" id="user-intro" placeholder="请输入电影简介"
                                      ng-model="movie.story"/>
                            </div>
                        </div>

                        <!--上传图片+预览-->
                        <div class="am-form-group am-form-file am-u-sm-9 am-u-sm-push-3">
                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                            <input id="doc-form-file" type="file" class="file-upload"
                                   name="files" ng-model="movie.img"/>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label"> <span class="tpl-form-line-small-title"></span></label>
                            <div class="am-u-sm-9">
                                <img src="http://dummyimage.com/200x200" class="img-thumbnail"/>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button ng-click="uploadMovie()"
                                        class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--弹窗-->
        <div class="am-modal am-modal-alert" tabindex="-1" id="admin-alert">
            <div class="am-modal-dialog">
                <div class="am-modal-bd">
                    {{message}}
                </div>
                <div class="am-modal-footer" onclick="window.location.href='admin-movies'">
                    <span class="am-modal-btn">确定</span>
                </div>
            </div>
        </div>
    </div>

</div>

<!--图片预览-->
<script>
    var oFileReader = new FileReader(); // 创建一个FileReader对象
    var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; // 验证图片的正则
    var oPreview = document.getElementsByClassName('img-thumbnail')[0]; // 预览图
    var oUpload = document.getElementsByClassName('file-upload')[0]; // 图片上传

    oFileReader.onload = function (event) {
        oPreview.src = event.target.result; // 替换预览图的src
    }

    oUpload.onchange = function loadImgFile() {
        var oFile = oUpload.files[0];

        if (!rFilter.test(oFile.type)) {
            alert('必须上传图片文件！');
        }

        if (window.FileReader) {
            /*
            读取指定的Blob对象或File对象中的内容。
            当读取操作完成时，会自动尝试去调用onloadend事件。
            同时，result属性将包含一个data:URL表示读取的文件的内容。
             */
            oFileReader.readAsDataURL(oFile);
        } else if (navigator.appName === 'Microsoft Internet Explorer') { // IE浏览器
            // IE10以下版本不支持FileReader()构造函数，利用滤镜兼容旧版本的IE
            oPreview.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)';
            oPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = oUpload.value;
        }
    }
</script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/amazeui.datatables.min.js"></script>
<script src="assets/js/dataTables.responsive.min.js"></script>
<script src="assets/js/app.js"></script>
</body>

</html>